<template>
  <div>
    <div class="padding-t-20 padding-r-20 padding-l-20">
      <div class="flex items-center">
        <div class="title" style="margin-bottom: 0;margin-right: 40px">驱动信息</div>
<!--        <q-btn-->
<!--          class="btn margin-r-10"-->
<!--          outline-->
<!--          color="primary"-->
<!--          label="网络诊断"-->
<!--          @click="networkDiagnosisShow"-->
<!--        />-->
        <q-btn
          class="btn"
          label="配置"
          color="primary"
          unelevated
          @click="driverSetting"/>
      </div>
      <div class="margin-t-10 info-detail">
        <div class="flex">
          <div class="margin-r-20">控制器类型: {{ driverInfoList[0] || '--' }}</div>
          <div class="margin-r-20">控制器品牌:{{ driverInfoList[1] || '--' }}</div>
          <div class="margin-r-20">控制器型号:{{ driverInfoList[2] || '--' }}</div>
          <div class="margin-r-20">协议名称:{{ driverInfoList[3] || '--' }}</div>
          <div class="margin-r-20">IOT接口:{{ driverInfoList[4] || '--' }}</div>
          <div class="margin-r-20">驱动版本号:{{ plcDriverInfo.version || '--' }}</div>
        </div>
        <div class="flex">
          <div class="margin-r-20">IP: {{ plcDriverInfo.driverIp }}</div>
          <div class="margin-r-20">端口: {{ plcDriverInfo.driverPort }}</div>
        </div>
      </div>
      <q-separator />
    </div>
    <PointTable isDetail :boxId="boxId" :deviceIds="deviceId" :height="height" />

    <plc-dialog ref="plcDialog"
                controllerType="2"
                @successAll="successAll"
                :detailDriverParams="detailDriverParams"
                :selectDriverInfo="selectDriverInfo"
                :deviceIds="deviceId"
                :lanInfo="lanInfo"
                :products="products"
                @changeDeviceIds="changeDeviceIds"
                @driverSuccess="getPlcBindDriverInfo"
                :step="step"></plc-dialog>

    <NetworkDiagnosis ref="networkDiagnosis" />
  </div>
</template>

<script>
import PointTable from '../list-components/plc-dialog/point-table'
import PlcDialog from '../list-components/plc-dialog'
import { getPlcDriverInfo } from '../../../../boot/miot/plc-list'
import NetworkDiagnosis from '../detail-components/network-diagnosis'

export default {
  name: 'driver-info',
  components: {
    PointTable,
    PlcDialog,
    NetworkDiagnosis
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    productId: {
      type: String,
      default: ''
    },
    deviceId: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '300px'
    },
    detailDriverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    },
    lanInfo: {
      type: Object,
      default: () => {}
    },
    products: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showDriver: false,
      plcDriverInfo: {
        driverName: '',
        version: '',
        driverPort: '',
        driverIp: ''
      },
      step: 0
    }
  },
  watch: {
    boxId: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getPlcBindDriverInfo()
        }
      }
    }
  },
  computed: {
    driverInfoList () {
      return this.plcDriverInfo?.driverName?.split('_') || []
    }
  },
  methods: {
    driverSetting () {
      this.step = 2
      this.$refs.plcDialog.showDialog()
    },

    getPlcBindDriverInfo () {
      getPlcDriverInfo(this.boxId).then(res => {
        if (res.data) {
          this.plcDriverInfo = res.data
          this.$emit('changeDriverInfo', res.data)
        }
      })
    },

    changeDeviceIds (data) {
      this.$emit('changeDeviceIds', data)
    },

    successAll () {
      this.$emit('successAll')
    },

    networkDiagnosisShow () {
      this.$refs.networkDiagnosis.showDialog()
    }
  }
}
</script>

<style scoped lang="scss">
.info-detail{
  font-size: 16px;
  line-height: 2;
}

>>>.container{
  width: 100%!important;
}
</style>
